<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
	<style type="text/css">
	*{padding:0px;margin:0px;list-style:none;text-decoration:none;}
	li{width:100px;height:30px;border:solid 1px green;float:left;text-align:center;line-height:30px;margin-right:10px;}
	
	.cur{width:150px;background:pink;}
	</style>
</head>
<body>
		<ul>
		<li><a href="">军事</a></li>
		<li><a href="">科技</a></li>
		<li><a href="">汽车</a></li>
		<li><a href="">体育</a></li>
		<li><a href="">生活</a></li>
	</ul>

<script type="text/javascript">
		//获取元素
		var lis = document.getElementsByTagName('li');

		for(var i =0 ; i<lis.length; i++){

			//鼠标放上去
			lis[i].onmousemove =function()
			{

				this.className ='cur';
			}

			//鼠标离开
			lis[i].onmouseout =function()
			{
				this.className ='';
			}



		}


</script>
</body>
</html>